<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/stock' }">首页</el-breadcrumb-item>
		  	<el-breadcrumb-item>库存详情</el-breadcrumb-item>
		</el-breadcrumb>
		
			<el-upload
			  class="avatar-uploader"
			  action="/api/base/uploadImage"
			  list-type="picture-card"
			  :on-preview="handlePictureCardPreview"
			  :on-remove="handleRemove"
			  :limit="5"
			  :file-list="img_url_1"
			  :on-success="successEvent">
			  <i class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
			<el-dialog :visible.sync="dialogVisible">
			  <img width="100%" :src="dialogImageUrl" alt="">   
			</el-dialog>
			
		
<!-- 		<div v-for="(item , index) in img_url_1" :key="index" class="imgwrap">
			<transition name="el-fade-in">
				<img :src="item" class="image">
			</transition>
				<i class="el-icon-delete del" @click="deleteimg(index,item)"></i>
		</div> -->
		
		
		<el-form ref="form" :model="form" label-width="90px" style="width:100%;">
		 <el-row class="good_detail">
			 <table class="detailReadOnly" cellpadding="0" cellspacing="0"> 
				 <tr>
					 <td width="300">
						 <el-form-item label="款号" class="item-detail underline">   
						   <el-input v-model="goods.FModel" :readonly="true" placeholder="款号"></el-input>
						 </el-form-item>
					 </td>
					 <td width="300">
						 <el-form-item label="厂款号" class="item-detail underline">
						   <el-input v-model="goods.FItemFactoryStyle" :readonly="true" placeholder="厂款号"></el-input>
						 </el-form-item>
					 </td>
					 <td width="300">
						 
					 </td>
				 </tr>
				 <tr>
					 <td>
						 <el-form-item label="销售价" class="item-detail underline">
						   <el-input v-model="goods.FSalePrice" :readonly="true" placeholder="销售价"></el-input>
						 </el-form-item>
					 </td>
					 <td>
						 <el-form-item label="款式" class="item-detail underline">
						   <el-input v-model="goods.FChartNumber" :readonly="true" placeholder="款式"></el-input>
						 </el-form-item>
					 </td>
					 <td>
						 <el-form-item label="制作供应商" class="item-detail underline">
						   <el-input v-model="goods.FSupplyIDName" :readonly="true" placeholder="制作供应商"></el-input>
						 </el-form-item>
					 </td>
				 </tr>
				 <tr>
					 <td>
						 <el-form-item label="主石类型" class="item-detail underline">
						   <el-input v-model="goods.Falias" :readonly="true" placeholder="主石类型"></el-input>
						 </el-form-item>
					 </td>
					 <td> 
						 <el-form-item label="主石规格" class="item-detail underline">
						   <el-input v-model="goods.ifmodel" :readonly="true" placeholder="主石规格"></el-input>
						 </el-form-item>
					 </td>
					 <td>
						 <el-form-item label="主成色" class="item-detail underline">
						   <el-input v-model="goods.Fversion" :readonly="true" placeholder="主成色"></el-input>
						 </el-form-item>
					 </td>
				 </tr>
				 <tr>
					 <td>
						 <el-form-item label="库存数" class="item-detail underline">
						   <el-input v-model="goods.fauxjc" :readonly="true" placeholder="库存数"></el-input>
						 </el-form-item>
					 </td>
					 <td>
						 <el-form-item label="销售件数" class="item-detail underline">
						   <el-input v-model="goods.fauxxs" :readonly="true" placeholder="销售件数"></el-input>
						 </el-form-item>
					 </td>
					 <td>
						<el-form-item label="期间销售" class="item-detail underline">
						  <el-input v-model="goods.fauxqj" :readonly="true" placeholder="期间销售"></el-input>
						</el-form-item> 
					 </td>
				 </tr>
								  
			 </table>
			 
			 <div class="time1">
				 <span class="demonstration">时间</span>
				 <el-date-picker
				   v-model="rantime"
				   value-format="yyyy-MM-dd"
				   type="daterange"
				   start-placeholder="开始日期"
				   end-placeholder="结束日期"
				   :readonly = "true"
				   :default-time="['00:00:00', '23:59:59']">
				 </el-date-picker>
			 </div>
			 
			 <div class="canEdit">
				 
				 <el-form-item label="主题分类" class="item-detail">
				   <el-input v-model="goods.subject"  placeholder="主题"></el-input>
				 </el-form-item>
				 <el-form-item label="风格分类" class="item-detail">
				   <el-input v-model="goods.style"  placeholder="风格"></el-input>
				 </el-form-item>
				  <el-form-item label="款式来源" class="item-detail">
				   <el-input v-model="goods.designer"  placeholder="设计师"></el-input>
				 </el-form-item>
				 <el-form-item label="专利" class="item-detail" style="clear: left;">
				   <el-input v-model="goods.patent"  placeholder="专利"></el-input>
				 </el-form-item>
				 <el-form-item label="专款" class="item-detail">
				   <el-input v-model="goods.special"  placeholder="专款"></el-input>
				 </el-form-item>
				
				 <el-form-item label="银版号" class="item-detail">
				   <el-input v-model="goods.pagenum"  placeholder="银版号"></el-input>
				 </el-form-item>
				 <!-- <el-form-item label="备注" class="item-detail">
				   <el-input v-model="goods.remark"  placeholder="备注"></el-input>
				 </el-form-item> -->
				 
			 </div>
			  
		  </el-row>
		  
		  <el-form-item class="submit">
		    <el-button type="primary" @click="onSubmit">提交</el-button>
		    <el-button @click="looklike">查看相似</el-button>
		  </el-form-item>
		</el-form>	

		  
	</div>
</template>

<script type="text/javascript">
	import E from 'wangeditor'
	import 'wangeditor/release/wangEditor.min.css'
	export default{
		data(){
			return{
				max:20,
				form: {
			          name: '',
			          region: '',
			          date1: '',
			          date2: '',
			          delivery: false,
			          type: [],
			          resource: '',
			          desc: ''
			        },
				rantime:[2],
				cateList:[],
				goods:{},
				img_url_1:[],
				dialogImageUrl: '',
				dialogVisible: false,
				phoneEditor:null,
				currentdata:[]
			}
		},
		mounted () {
	      	/*this.phoneEditor = new E('#websiteEditorElem')
	      	this.phoneEditor.onchange = function () {
	        	this.goods.detailText = this.$txt.html()
	      	}
	      	this.phoneEditor.create()
	      	*/
		   
	    },
		created(){
			//this.goods._token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
			//this.getCates();
			this.getGood();
			
		},
		methods:{
		
// 			// 查看相似
			looklike(){
				this.$router.push({ path: '/stock?look='+JSON.stringify(this.currentdata)})
			},
			 onSubmit() {
					axios.post('/api/stock/edit', {
							FModel  : this.goods.FModel,
							fid : this.goods.fid,
							style  : this.goods.style,
							subject  : this.goods.subject,
							patent  : this.goods.patent,
							special  : this.goods.special,
							designer  : this.goods.designer,
							pagenum  : this.goods.pagenum,
							remark  : this.goods.remark
						  })
						  .then(res => {
							if(res.data.code ==200){
								this.$notify({
								  title: '成功',
								  message: res.data.message,
								  type: 'success'
								});
								setTimeout(() => {	
									this.$router.go(-1)
									 // this.$router.push({ path: '/api/style/detail?dd='+JSON.stringify(this.currentRow)})
								},1000);
							}
						  	
						  })
						  .catch(error => {
							  this.$notify.error({
							    title: '错误',
							    message: error.data.message,
							  });
						  })
			      },
		
			getGood(){
				let dd = JSON.parse(this.$route.query.dd);
				// console.log(dd.ifmodel);
				this.rantime[0]=dd.stime;
				this.rantime[1]=dd.etime;
				axios.get('/api/stock/detail?pragam='+this.$route.query.dd)
					.then(res => {
						var data = res.data.result; 
						this.goods = data;
						let Arr = data.img_url_1;
						this.currentdata = data;
						let newArr = Arr.map( (item,index) => {
							let obj = {};
							obj.url = item;
							obj.uid = Math.random();
							return obj;
						});
						this.img_url_1 = newArr;
					})
					.catch(error => {
						
					})
			},
			
			
			formatStatus: function (row, column) {
				return row.order_status == 1 ? '已发货' : row.order_status == 2 ? '已完成' : '待发货';
			},
			handleAttrData(data){
				var temp = [];
				for(var i=0;i<data.length;i++){
					temp.push({label:data[i].attr_name, key:'{"attr_id":'+data[i].id+',"cate_id":'+data[i].cate_id+'}'});
				}
				return temp
			},
		handleRemove(file, fileList) {
			axios.post('/api/base/delImage',file)
					.then(result => {
						this.img_url_1 = fileList;
					})
					.catch(error => {
					});
		},
		handlePreview(file) {
			//console.log(this.goods.detailPic);
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		},
		beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`);
		},
		successEvent(file){
		    	this.img_url_1.push({name:file.result,url:file.result});
		    },
		handleClose(obj) {
			this.dialogVisible = false;
		},
		filterMethod(query, item) {
			return item;
		}
			
		}
	}
</script>

<style lang="scss" >
	input[type=file] {
	    display: none;
	}
	.submit{
		margin-top: 30px;
	}
	.good_detail{
		.time1{
			width: 100%;
			clear: left;
			.demonstration{
				display: inline-block;
				width: 86px;
				text-align: right;
				padding-right: 8px;
				font-size: 14px;
				font-weight: 600;
				color: #606266;
			}
		}
		.detailReadOnly{
			float: left;
			overflow: hidden;
			    margin-bottom: 15px;
			.item-detail{
				margin-top: 10px;
				margin-bottom: 10px;
			}
			.underline{
				.el-input__inner{
					border: 0;
					border-bottom: 1px solid #DCDFE6;
					border-radius: 0;
				}
			}
		}
		.canEdit{
			float: left;
			width: 100%;
			margin-top: 25px;
			.el-input__inner{
				width: 210px;
			}	
			.item-detail{
				float: left
			}
		}
	}
	.image{
		
		border: 1px solid #f2f2f2;
		border-radius: 6px;
		overflow: hidden;
	}
	.itembox{
		box-shadow: none;
		border: none;
	}
	.imgwrap{
		position: relative;
		display: inline-block;
		margin-right: 10px;
	}
	.imgwrap:last-child{margin-right: 0;}
	.del{
		position: absolute;
		right: 6px;
		top: 6px;
		display: none;
	}
	.del:hover{cursor: pointer;}
	.imgwrap:hover .del{display: block;}
	
	.el-upload-list--picture-card .el-upload-list__item{
		width: 200px;
		height: 200px;
	}
	.el-upload--picture-card{
		width: 200px;
		height: 200px;
		line-height: 200px;
	}
</style>